<template>
  <div class="logo">
    <img src="../../../public/images/ankanglogo.png" alt="" style="width: 100%;">
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
      v-model="form.userName"
      name="用户名"
      label="用户名"
      placeholder="请输入用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
      class="text"
    />
    <van-field
      v-model="form.passWord"
      type="password"
      name="密码"
      label="密码"
      placeholder="请输入密码"
      :rules="[{ required: true, message: '请填写密码' }]"
      class="text"
    />
    <van-field
      v-if="formtype"
      v-model="form.validCode"
      name="验证码"
      label="验证码"
      placeholder="请输入验证码"
      class="text"
    > 
      <template #button>
        <div>
          <span @click="countdownChange">{{ countdown.validText }}</span>
        </div>
      </template>
  </van-field>
    <div class="jump-link">
        <span @click="handleChange"  class="change">{{ formtype?'返回登录':'点击注册' }}</span>
      </div>
    </van-cell-group>
    <div class="btn">
        <van-button native-type="submit" type="primary" block round>{{ formtype?'注册账号':'登录' }}</van-button>
    </div>
  </van-form>
</template>

<script setup>
import { getCurrentInstance,reactive,ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
//获取当前vue实例
const {proxy} = getCurrentInstance()
//定义表单数据
const form = reactive({
    userName:'',
    passWord:'',
    validCode:''
})
 //切换表单数据,0登录，1注册
 const formtype = ref(0)
 //点击切换登录和注册
 const handleChange = ()=>{
  formtype.value = formtype.value ? 0:1
 }
 //发送短信
 const countdown= reactive({
  validText:'获取验证码',
  time:60
 })

 //倒计时逻辑
 let flag = false
 const countdownChange = async()=>{
  //防止重复提交，阻止冒泡
  if(flag) return
  //校验文本框内容
  const phoneReg =  /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
  if(!form.userName || !phoneReg.test(form.userName)){
     return showNotify({
        message: '手机号错误',
        type: 'warning',
  })
  //进行倒计时逻辑
  }
   const time = setInterval(() => {
    //如果时间小于0
    if(countdown.time<=0){
      //进行重置
      countdown.time = 60
      countdown.validText = '获取验证码'
      flag = false
      clearInterval(time)
    }
      countdown.time-=1
      countdown.validText = `剩余${countdown.time}s`
  }, 1000);
  flag = true
  //获取验证码接口
  const {data} = await proxy.$api.getcode({tel:form.userName})
  if(data.code===10000){
      // 成功通知
      showSuccessToast('证码发送成功，请注意查收');
    }
 }

//表单提交
const onSubmit =async()=>{
  // console.log(1111);
  //如果是注册的话，请求注册接口
  if(formtype.value){
        // console.log(loginForm,'loginform');
        const {data} = await proxy.$api.userRegister(form)
        // console.log(data);
          if(data.code===10000){
            showSuccessToast('注册成功')
            //通过改变formtype的数值跳到登录页面进行登录
            formtype.value=0
        }
        
      }else{
        //执行登录接口
        const {data} = await proxy.$api.login(form)
        if(data.code === 10000){
          //设置token值
        localStorage.setItem('h5_token',data.data.token)
        localStorage.setItem('h5_userInfo',JSON.stringify(data.data.userInfo))
        router.push('/home')
    }
      }
    
}
</script>

<style lang="less" scoped>
h1{
    text-align: center;
}
.btn{
    margin: 16px;
    margin-top: 80px;
}
.change{
  color: blue;
  position: relative;
  left: 80%;
}
.logo{
  width: 300px;
  height: 300px;
  margin: auto;
}
.text{
  font-size: 17px;
  margin-top: 20px
}

</style>